<template>
    <div class="pupop">
        <div class="z_mask" :class="{'z_mask_visible':flag}"></div>
        <div class="z_box z_box_bottom" :class="{'z_height_80':flag,'z_height_0':!isbox}">
            <p style="text-align:center">do something</p>
        </div>

    </div>
</template>

<script>
export default {
  name: 'pupop',
  props: {
    flag: Boolean,
    isbox: Boolean
  },
  methods:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

.z_mask{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    transition:all 0.5s;
}
.z_mask_visible{
    opacity:1!important;
}
.z_box{
    position: fixed;
    max-height: 100%;
    overflow-y:auto;
    background-color:#fff;
    z-index: 3000;
    height: 15%;
    transition:height 0.4s;
    -webkit-overflow-scrolling: touch;
}
.z_box_bottom{
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 30px 30px 0 0;
}
.z_height_80{
    height: 80%;
    // transition:height 0.4s;
}
.z_height_0{
    height: 0%;
    // transition:height 0.2s;
}

// 浏览器兼容写法
// transform:rotate(7deg);
// -ms-transform:rotate(7deg); /* IE 9 */
// -moz-transform:rotate(7deg); /* Firefox */
// -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
// -o-transform:rotate(7deg); /* Opera */

// .compatible(@str,@time){
//     transition: @str @time;
//     -ms-transform:@str @time; /* IE 9 */
//     -moz-transform:@str @time; /* Firefox */
//     -webkit-transform:@str @time; /* Safari 和 Chrome */
//     -o-transform:@str @time; /* Opera */
// }
</style>
